<template>
  <div class="login-page-layout">
    <!-- 左栏 (1/3) -->
    <div class="left-panel">
      <!-- 新增一个容器来承载浅红色背景，使其在白色padding下方开始 -->
      <div class="slogan-wrapper">
        <AuthSlogan />
      </div>
    </div>

    <!-- 右栏 (2/3) -->
    <div class="right-panel">
      <AuthForm />
    </div>
  </div>
</template>

<script setup>
import AuthSlogan from '@/components/user/UserSlogan.vue'
import AuthForm from '@/components/user/UserForm.vue'
</script>

<style scoped>
.login-page-layout {
  display: flex;
  height: 90vh; /* 占满整个视口高度 */
}

/* 步骤 1: 左栏的背景色改为白色，并添加白色上边距 */
.left-panel {
  flex: 0 0 33.33%; /* 占 1/3 宽度 */
  background-color: white; /* 左栏容器背景改为白色 (用于padding) */
  padding-top: 50px; /* 设置你想要的白色顶部内边距高度 */
  /* 移除原有的 background-color: #f7786b; */
}

/* 步骤 2: 给内部容器设置原有的浅红色背景 */
.slogan-wrapper {
  /* 内部容器占据剩余空间并设置浅红色背景 */
  height: 100%; /* 确保它向下延伸 */
  background-color: #f7786b; /* 浅红色背景，接近图示颜色 */
}

.right-panel {
  flex: 1; /* 占据剩余的 2/3 宽度 */
  background-color: white;
}
</style>
